import { FC, useState } from 'react';
import { Layout } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import { IRouteComponentProps } from 'umi';

import styles from './AdminLayout.less';

import SliderBox from '@/components/views/home/slider/index'; // 菜单组件
import HeaderBox from '@/components/views/home/header/index'; // 头部组件

const { Header, Content, Sider } = Layout;

const AdminLayout: FC<IRouteComponentProps> = (props) => {
  // const menuList = props.route.routes!.filter((item) => item.isMenu);

  const [collapsed, setCollapsed] = useState<boolean>(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  return (
    <Layout>
      <Sider
        width={210}
        className={styles.slider_container}
        collapsed={collapsed}
        collapsible
        theme="light"
        
      >
        <SliderBox  collapsed={collapsed}></SliderBox>
      </Sider>
      <Layout style={{ padding: '6px', height: '100%' }}>
        <Header>
          <HeaderBox
            collapsed={collapsed}
            toggleCollapsed={() => {
              toggleCollapsed();
            }}
          ></HeaderBox>
        </Header>
        <Content className={styles.content_container}>
          <Scrollbars>{props.children ? props.children : null}</Scrollbars>
        </Content>
      </Layout>
    </Layout>
  );
};
export default AdminLayout;
